<template>
  <div class="filterbox" v-if='SortMenus.length > 0'>
    <div class="fiter_box" :class='fixed?"fixed":""'>
      <div class="fiter_list"
        v-if='item.selected'
        :class=" (item.Value == sort) || (item.Value == 20 && shino)?'red':''" 
        v-for='(item,index) in SortMenus' 
        @click='changeTitle(item.Value)'>{{item.Title}}</div>
    </div>
    <div class="gridmask" v-if='gridflag' @click.stop='clearMask'></div>
    <div class="gridBox">
      <div v-for='(item,index) in Grid'>
        <div class="grid_list" v-if='item.Panels.length > 0'>
          <div class="grid_title">
            <div class="title_name">{{item.Name}}</div>
            <div class="title_method" 
              @click.stop='chooseHide(index)'
              v-if='(item.Panels.length > 6 && item.TypeID !== 3) || (item.Panels.length > 3 && item1.TypeID == 3)'>
              {{item.choose?"∧":"∨"}}
            </div>
          </div>
          <div class="grid_list_box" :class='item.choose?"heightauto":""'>
            <template v-if='item.TypeID == 3'>
              <input type="number" v-model='MinPrice' placeholder="￥最低价格" class="input_min">
              <div class="center">至</div>
              <input type="number" v-model='MaxPrice' placeholder="￥最高价格" class="input_min">
            </template>
            <div class="list_grid" 
              :class='item1.selected?"b_c_r":""' 
              @click.stop='chooseTitle(item.selected,item1.selected,index,index1)' 
              v-for='(item1,index1) in item.Panels'>
                {{item1.Name}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid_bottom">
      <button class="c_grid" @click.stop='clearGrid'>筛选清除</button>
      <button class="s_grid" @click.stop='comfire'>确定</button>
    </div>

    
  </div>
</template>

<script>
import { Indicator } from 'mint-ui'
export default {
  name: 'filte',
  props:{
    filterobj:{type:Object}
  },
  data () {
    return {
      fixed: false,
      sort: 0,
      gridflag: false,
      firstGrid: true,
      shino: false,
      Grid: [],
      MinPrice: '',
      MaxPrice: ''
    }
  },
  created: function () {
    
  },
  computed: {
    SortMenus(){
      return this.$store.getters.getSortMenus
    },
    // Grid(){
    //   return this.$store.getters.getGrid
    // },
  },
  watch:{
    'gridflag': function(){
      var ele = document.querySelector('.gridBox'),
       elem = document.querySelector('.grid_bottom')
      ele.style.transition = 'transform .5s'
      elem.style.transition = 'transform .5s'
      if(this.gridflag){
        ele.style.transform = 'translateX(-100%)'
        elem.style.transform = 'translateX(-100%)'
      }else{
        ele.style.transform = 'translateX(100%)'
        elem.style.transform = 'translateX(100%)'
      }
    }
  },
  methods: {
    changeTitle: function(sort){
      if(this.sort == 5 && sort == 5){
        this.sort = 4
        this.SortMenus.map(item => {
          if (item.Value == 5) {
            item.selected = false;
          }
          if (item.Value == 4) {
            item.selected = true;
          }
        })
      }else if(this.sort == 4 && sort == 4){
        this.sort = 5
        this.SortMenus.map(item => {
          if (item.Value == 4) {
            item.selected = false;
          }
          if (item.Value == 5) {
            item.selected = true;
          }
        })
      }else if(sort == 20){
        if(this.firstGrid){
          this.getGrids()
          this.shino = true
        }else{
          this.gridflag = !this.gridflag
          this.shino = true
        }
      }else if(this.sort == sort){
        return
      }else{
        this.sort = sort
      }
      this.$store.commit('changeSort',this.sort)
    },
    handleScroll:function(){
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if(this.SortMenus.length > 0){
        var offsetTop = document.querySelector('.filterbox').offsetTop
        if (scrollTop >= offsetTop){
          this.fixed = true  
        }else{
          this.fixed = false
        }
      }else{
        return false
      }
      
    },
    clearMask: function(){
      this.gridflag = !this.gridflag
    },
    getGrids: function(){
      var that = this
      Indicator.open()
      that.$http('/pinhuoitem/GetSearchPanel',that.filterobj,function(res){
        Indicator.close()
        if(res.Result){
          that.firstGrid = false
          res.Data.Panels.map(item => {
            item.choose = false;
            if (item.TypeID == 1 || item.TypeID == 2) {
              item.selected = true;
            } else {
              item.selected = false;
            }
            item.Panels.map(m => {
              m.selected = false
            })
          })
          that.Grid = res.Data.Panels
          //that.$store.commit('changeGrid',res.Data.Panels)
          that.clearMask();
        }
      },'GET')
    },
    chooseTitle: function(a,b,index,index1){
      if(a){
        this.Grid[index].Panels[index1].selected = !this.Grid[index].Panels[index1].selected
      }else{
        if (this.Grid[index].Panels[index1].selected) {
          this.Grid[index].Panels.map(item => {
            item.selected = false;
          })
          if (this.Grid[index].Panels.TypeID == 3) {
            this.MinPrice = "";
            this.MaxPrice = "";
          }
        } else {
          this.Grid[index].Panels.map(item => {
            item.selected = false;
          })
          this.Grid[index].Panels[index1].selected = true;
          if (this.Grid[index].TypeID == 3) {
            var arr = this.Grid[index].Panels[index1].Name.split("-")
            this.MinPrice = Number(arr[0])
            this.MaxPrice = Number(arr[1])
          }
        }
      }
    },
    clearGrid: function(){
      this.Grid.map(item => {
        item.Panels.map(m => {
          m.selected = false
        })
      })
      this.shino = false
      this.MinPrice = ''
      this.MaxPrice = ''
      this.filterFun(1)
      this.clearMask()
    },
    comfire: function(){
      this.shino = true
      this.filterFun(2)
      this.clearMask()
    },
    filterFun: function(type){
      var filterValues = {}
      if(type == 1){
        this.$store.commit('changeFilterValues',{})
        return
      }
      filterValues.MaxPrice = this.MaxPrice == ''?100000:this.MaxPrice
      filterValues.MinPrice = this.MinPrice == ''?0:this.MinPrice
      filterValues.Params = []
      this.Grid.map(item => {
        if(item.TypeID != 3){
          var obj = {}
          var temparr = []
          item.Panels.map(m => {
            if(m.selected){
              temparr.push(m.ID)
            }
          })
          if(temparr.length > 0){
            obj.TypeID = item.TypeID;
            obj.Values = temparr.join(',');
            filterValues.Params.push(obj)
          }
        }
      })
      this.$store.commit('changeFilterValues',filterValues)
    },
    chooseHide: function(idx){
      this.Grid[idx].choose = !this.Grid[idx].choose
    }
  },
  mounted(){
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .filterbox{width: 100%;height: 45px;position: relative;background-color: #fff;}
  .fiter_box{padding: 10px 0;width: 100%;display: flex;position: relative;background-color: #fff;border-bottom: 1px solid #ddd;}
  .fiter_list{flex: 1;text-align: center;font-size: 14px;line-height: 24px;border-left: 1px solid #d5d5d6;}
  .fiter_list:first-child{border:none;}
  .red{color: red;}
  .fixed{position: fixed;left: 0;top: 0;z-index: 101;}


  .gridmask{position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 1000;background: rgba(0,0,0,.5);}
  .gridBox{width: 80%;max-width: 576px;position: fixed;z-index: 1002;background-color: #fff;top: 0;bottom: 0;left: 100%;}
  .grid_list{width: 90%;overflow: hidden;margin-top: 10px;padding: 5px 5% 10px}
  .grid_title{width: 100%;overflow: hidden;font-size: 16px;color: #000;padding-bottom: 10px;line-height: 32px;font-weight: bold;}
  .title_name{float: left;}
  .grid_list_box{overflow: hidden;max-height: 84px;font-size: 14px;}
  .list_grid{width: 29%;background-color: #f3f4f5;border:1px solid #f3f4f5;border-radius: 3px;height: 32px;line-height: 32px;font-size: 12px;margin-right: 5%;float: left;text-align: center;margin-bottom: 10px;color: #808080;}
  .list_grid:nth-child(3n){margin-right: 0;}
  .grid_bottom{width: 80%;bottom: 0;left: 100%;z-index: 1005;height: 45px;border-top: 1px solid #ddd;position: fixed;max-width: 576px;}
  .c_grid{float: left;height: 45px;line-height: 45px;text-align: center;font-size: 18px;background-color: #fff;color: #000;border: none;outline: none;border-radius: 0;width: 50%;}
  .b_c_r{border:1px solid #e13e3f;}
  .s_grid{float: left;height:45px;line-height: 45px;text-align: center;font-size: 18px;background-color: #e13e3f;color: #fff;border: none;outline: none;border-radius: 0;width: 50%;}
  .input_min{width: 35%;height: 32px;line-height: 32px;border: none;border-radius: 3px;background-color: #f3f4f5;text-align: center;font-size: 12px;float: left;margin-bottom: 10px;outline: none;}
  .center{float: left;width: 20%;height: 32px;text-align: center;margin-bottom: 10px;}
  .title_method{float: right;padding: 0 10px;}
  .heightauto{max-height: 1000px;}
</style>
